<!DOCTYPE html>
<html lang="en">
	<head>
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<meta charset="utf-8" />
		<title>品牌列表</title>

		<meta name="description" content="Static &amp; Dynamic Tables" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />

		<!-- bootstrap & fontawesome -->
		<link rel="stylesheet" href="/lib/ace/css/bootstrap.min.css" />
		<link rel="stylesheet" href="/lib/ace/font-awesome/4.5.0/css/font-awesome.min.css" />

        <!--easyui-->
        <link rel="stylesheet" href="/lib/easyui/themes/default/easyui.css" />
        <link rel="stylesheet" href="/lib/easyui/themes/icon.css" />

		<!-- page specific plugin styles -->

		<!-- text fonts -->
		<link rel="stylesheet" href="/lib/ace/css/fonts.googleapis.com.css" />

		<!-- ace styles -->
        <link rel="stylesheet" href="/lib/ace/css/ace.min.css" class="ace-main-stylesheet" id="main-ace-style" />

		<!--[if lte IE 9]>
			<link rel="stylesheet" href="/lib/ace/css/ace-part2.min.css" class="ace-main-stylesheet" />
		<![endif]-->
		<link rel="stylesheet" href="/lib/ace/css/ace-skins.min.css" />
		<link rel="stylesheet" href="/lib/ace/css/ace-rtl.min.css" />

		<!--[if lte IE 9]>
		  <link rel="stylesheet" href="/lib/ace/css/ace-ie.min.css" />
		<![endif]-->

		<!-- inline styles related to this page -->

		<!-- ace settings handler -->
		<script src="/lib/ace/js/ace-extra.min.js"></script>

		<!-- HTML5shiv and Respond.js for IE8 to support HTML5 elements and media queries -->

		<!--[if lte IE 8]>
		<script src="/lib/ace/js/html5shiv.min.js"></script>
		<script src="/lib/ace/js/respond.min.js"></script>
		<![endif]-->
	</head>

	<body>


		<div class="main-container ace-save-state" id="app">
			<div class="main-content">
				<div class="main-content-inner">
					<div class="page-content">

                        <div class="row" style="padding: 20px 10px 20px 50px">
                                <div class="col-xs-9">
                                    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#addBrandForm" data-whatever="@mdo" >
                                        <i class="ace-icon fa fa-check bigger-120"></i>
                                        品牌添加
                                    </button>
                                    <!-- <button class="btn btn-primary" id="addBrand">
                                       
                                    </button> -->
                                </div>
                                <div class="col-xs-3">
                                    <form>
                                        <div class="row">
                                            <div class="col-xs-12 col-sm-11 col-md-10">
                                                <div class="input-group">
                                                    <input type="text" class="form-control" v-model="key" placeholder="字段查询" />
                                                    <div class="input-group-btn">
                                                        <button type="button" class="btn btn-default no-border btn-sm">
                                                            <i class="ace-icon fa fa-search icon-on-right bigger-110"></i>
                                                        </button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                        </div>
                            
                        <div class="row">
                            <div class="col-xs-12">
                                <table id="simple-table" class="table  table-bordered table-hover">
                                    <thead>
                                        <tr>
                                            <th>序号</th>
                                            <th>id</th>
                                            <th>品牌名称</th>
                                            <th>品牌LOGO</th>
                                            <th>品牌首字母</th>
                                            <th>操作</th>
                                        </tr>
                                    </thead>

                                    <tbody>
                                        <tr v-for="(item ,i) in list" :key="item.id">
                                            <td v-cloak>{{ i + num }}</td>
                                            <td v-cloak>{{ item.id }}</td>
                                            <td v-cloak>{{ item.name }}</td>
                                            <td v-cloak><img :src="item.image" /></td>
                                            <td v-cloak>{{ item.letter }}</td>
                                            <td>
                                                <div class="hidden-sm hidden-xs btn-group">
                                                    <button class="btn btn-xs btn-info" data-toggle="modal" :data="item.id" :name="item.name" :letter="item.letter"
                                                            data-target="#modifyBrandForm" data-whatever="@mdo">
                                                        <i class="ace-icon fa fa-pencil bigger-120"></i>
                                                    </button>
                                                
                                                    <button class="btn btn-xs btn-danger" @click="deleteBrand(i)">
                                                        <i class="ace-icon fa fa-trash-o bigger-120"></i>
                                                    </button>
                                                </div>
                                            </td>
                                        </tr>

                                    </tbody>
                                </table>
                            </div>
                        </div>
                        
                        <!--分页-->
                        <div class="am-u-sm-12 am-u-end base-ad">
                            <ul class="am-pagination am-pagination-centered" id="page">
                                <li class="am-disabled"></li>
                            </ul>
                        </div>

                        <!-- 添加表单 -->
                        <div class="modal fade" id="addBrandForm" tabindex="-1" role="dialog" aria-labelledby="brandFormLabel">
                            <div class="modal-dialog" role="document">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                        <h4 class="modal-title" id="addBrandFormLabel">品牌添加</h4>
                                    </div>
                                    <div class="modal-body">

                                        <form class="form-horizontal" role="form">
                                            <div class="form-group">

                                                <label class="col-sm-4 control-label no-padding-right">
                                                    <span style="color: red;">*</span>品牌名称:
                                                </label>

                                                <div class="col-sm-8">
                                                    <input type="text" id="addName" name="name" required placeholder="请输入品牌名称" class="col-xs-10 col-sm-5" />
                                                </div>
                                            </div>

                                            <div class="form-group">

                                                <label class="col-sm-4 control-label no-padding-right" >
                                                    <span style="color: red;">*</span>品牌首字母:
                                                </label>

                                                <div class="col-sm-8">
                                                    <input type="text" id="addLetter" name="letter" required placeholder="请输入品牌首字母" class="col-xs-10 col-sm-5" />
                                                </div>
                                            </div>

                                            <div class="form-group">
                                                <label class="col-sm-4 control-label no-padding-right" >品牌LOGO:</label>

                                                <div class="col-sm-8" style="width: 180px;">
                                                    <input  class="col-xs-10 col-sm-5" multiple="" type="file" name="logo" id="addLogo" />
                                                </div>
                                            </div>

                                            <div class="form-group">

                                                <label class="col-sm-4 control-label no-padding-right">
                                                    <span style="color: red;">*</span>选择商品分类:
                                                </label>
                                                <div class="col-sm-8" name="categoryTree" id="addCategoryTree" style="overflow: hidden">

                                                </div>
                                            </div>
                                        </form>

                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                                        <button type="button" class="btn btn-primary" id="add_brand_submit">立即提交</button>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- 修改表单 -->
                        <div class="modal fade" id="modifyBrandForm" tabindex="-1" role="dialog" aria-labelledby="brandFormLabel">
                            <div class="modal-dialog" role="document">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                        <h4 class="modal-title" id="modifyBrandFormLabel">品牌修改</h4>
                                    </div>
                                    <div class="modal-body">

                                        <form class="form-horizontal" role="form">
                                            <div class="form-group">

                                                <label class="col-sm-4 control-label no-padding-right">
                                                    <span style="color: red;">*</span>品牌名称:
                                                </label>

                                                <div class="col-sm-8">
                                                    <input type="text" id="modifyName" name="name" required placeholder="请输入品牌名称" class="col-xs-10 col-sm-5" />
                                                </div>
                                            </div>

                                            <div class="form-group">

                                                <label class="col-sm-4 control-label no-padding-right" >
                                                    <span style="color: red;">*</span>品牌首字母:
                                                </label>

                                                <div class="col-sm-8">
                                                    <input type="text" id="modifyLetter" name="letter" required placeholder="请输入品牌首字母" class="col-xs-10 col-sm-5" />
                                                </div>
                                            </div>

                                            <div class="form-group">
                                                <label class="col-sm-4 control-label no-padding-right" >品牌LOGO:</label>

                                                <div class="col-sm-8" style="width: 180px;">
                                                    <input  class="col-xs-10 col-sm-5" multiple="" type="file" name="logo" id="modifyLogo"/>
                                                </div>
                                            </div>

                                            <div class="form-group">

                                                <label class="col-sm-4 control-label no-padding-right">
                                                    <span style="color: red;">*</span>选择商品分类:
                                                </label>
                                                <div class="col-sm-8" name="categoryTree" id="modifyCategoryTree" style="overflow: hidden">

                                                </div>
                                            </div>
                                        </form>

                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                                        <button type="button" class="btn btn-primary" id="modify_brand_submit">立即提交</button>
                                    </div>
                                </div>
                            </div>
                        </div>

					</div>
				</div>
            </div>
            
		</div>

		<!-- basic scripts -->

		<!--[if !IE]> -->
		<script src="/lib/ace/js/jquery-2.1.4.min.js"></script>

		<!-- <![endif]-->

		<!--[if IE]>
            <script src="/lib/ace/js/jquery-1.11.3.min.js"></script>
        <![endif]-->

		<script type="text/javascript">
			if('ontouchstart' in document.documentElement) document.write("<script src='/lib/ace/js/jquery.mobile.custom.min.js'>"+"<"+"/script>");
		</script>
		<script src="lib/ace/js/bootstrap.min.js"></script>

		<!-- page specific plugin scripts -->
		<script src="/lib/ace/js/jquery.dataTables.min.js"></script>
		<script src="/lib/ace/js/jquery.dataTables.bootstrap.min.js"></script>
		<script src="/lib/ace/js/dataTables.buttons.min.js"></script>
		<script src="/lib/ace/js/buttons.flash.min.js"></script>
		<script src="/lib/ace/js/buttons.html5.min.js"></script>
		<script src="/lib/ace/js/buttons.print.min.js"></script>
		<script src="/lib/ace/js/buttons.colVis.min.js"></script>
		<script src="/lib/ace/js/dataTables.select.min.js"></script>

		<!-- ace scripts -->
		<script src="/lib/ace/js/ace-elements.min.js"></script>
        <script src="/lib/ace/js/ace.min.js"></script>

        <!--easyui-->
        <script src="/lib/easyui/jquery.easyui.min.js"></script>
        <script src="/lib/easyui/locale/easyui-lang-zh_CN.js"></script>

        <!--vue-->
        <script src="/lib/vue/vue.js"></script>

        <!--bootstrap分页-->
        <script src="/lib/bootstrap/js/bootstrap-paginator.js"></script>

        <!-- 自己 js -->
        <script src="/js/brand.js"></script>
	</body>
</html>
